<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>我的购物车</h1>
          <table border="1px radio black">
            <thead>
              <td>全选<input type="checkbox" :checked="cheacked" v-on:change="cheackAll"/></td>
              <td>商品名字</td>
              <td>价格</td>
              <td>数量</td>
              <td>总价</td>
              <td>操作</td>
            </thead>
            <tbody>
              <tr v-for="obj in goods">
                <td ><input type="checkbox" :checked="cheacked" /></td>
                <td ><input type="text" :value="obj.goodsName" :disabled="obj.contro" v-on:blur="dis(obj)"></td>
                <td >{{obj.price}}</td>
                <td> 
                  <input type="button" value=" -1 " v-on:click="minus(obj)">
                      {{obj.num}} 
                   <input type="button" value=" +1 " v-on:click="add(obj)">
                 </td>
                <td >{{obj.num*obj.price}}</td>
                <td><button v-on:click="change(obj)">编辑</button><button v-on:click="del(obj.id-1)">删除</button></td>
              </tr>
              <tr>
                <td colspan="6">总价：{{allSum}}</td>
              </tr>
            </tbody>
          </table>
      </div>
    <script>
      //vm表示就是 ViewModel！！！
      //我们Vue是一个有参构造方法，参数是一个Object对象
      const vm = new Vue({
        //我们的所有的内容，都要定义在这个object对象中
        //1.配置数据渲染出口，由el指定：element！
        el:"#app",
        //2.data 就是Model
        data:{
           //用来驱动全选
           cheacked:false,
           goods:[
              {
                id:1,
                goodsName:'java从入门到入土',
                price:50,
                num:5,
                contro:true
              },{
                id:2,
                goodsName:'java从入门到精通',
                price:150,
                num:2,
                contro:true
              },
              {
                id:3,
                goodsName:'JVM虚拟机',
                price:30,
                num:10,
                contro:true
              },{
                id:4,
                goodsName:'JMM：java内存模型',
                price:130,
                num:30,
                contro:true
              }
           ]
        },
        computed:{
            allSum(){
            let total=0;
            this.goods.map(good => {
                total += good.price*good.num;            
            })
            return total;
          }
        },
        methods: {
          minus(e){
            //如何在方法中获取，data中的数据呢？
            // console.log(this);
            //直接通过this拿到vue实例，点data中的数据。
            // console.log(e);
            if (e.num>0) {
              e.num--;
            }else{
              alert("别点我了……")
            }
          },
          add(e){
            e.num++;
          },
          cheackAll(event){
            console.log( this.cheacked);
            console.log("选中全选！！");
            this.cheacked = !this.cheacked 
          },
          change(e){
            e.contro=false;
          },
          del(e){
            this.goods.splice(e,1)
          },
          dis(e){
            e.contro=true;
          }
        },  
      });
    </script>
</body>
</html>